<!--
* @FileDescription: 状态图图表组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-18 12:30:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-02 09:01:37
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div id="comChart" style="width: 100%;height: 500px;">
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import symbolCard from "./symbolCard.vue";
    import axios from "@/utils/request"
    import * as echarts from 'echarts'
    import dayjs from 'dayjs'
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        chartList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        attrObj: {
            type: Object,
            default: () => {
                return undefined
            }
        },
    })
    let comChart
    function setC1(arr) {
        let data = []
        var categories = [];
        let xdata = []
        if (JSON.stringify(arr) != "{}") {
            xdata = arr.allTimes.map(item => {
                return dayjs(item).format('MM-DD HH:mm');
            })
            if (arr.switchPointLines != null) {
                arr.switchPointLines.forEach((item) => {
                    categories.push(item.pointId)
                    if(item.switchStateLines!=null){
                        item.switchStateLines.forEach(itemsub => {
                            itemsub.pointId = item.pointId
                            itemsub.lengedList = item.lengedList
                            if (item.lengedList&&item.lengedList.length > 0) {
                                if (item.lengedList.length == 3) {
                                    if (itemsub.stateValue == 0) {
                                        itemsub.name = item.lengedList[0].connotation
                                    } else if (itemsub.stateValue == 1) {
                                        itemsub.name = item.lengedList[1].connotation
                                    } else if (itemsub.stateValue == 2) {
                                        itemsub.name = item.lengedList[2].connotation
                                    } else if (itemsub.stateValue == null) {
                                        itemsub.name = '网络故障/分站故障'
                                    }
                                } else if (item.lengedList.length == 2) {
                                    if (itemsub.stateValue == 0) {
                                        itemsub.name = item.lengedList[0].connotation
                                    } else if (itemsub.stateValue == 1) {
                                        itemsub.name = item.lengedList[1].connotation
                                    } else if (itemsub.stateValue == null) {
                                        itemsub.name = '网络故障/分站故障'
                                    }
                                }
                            }
                            data.push(itemsub)
                        })
                    }
                })
            }
        }
        let this_ = {};
        this_.colmap = {
            报警: "rgba(245, 240, 223, 1)",
            断电: "rgba(255, 85, 85, 1)",
            馈电异常: "rgba(80, 204, 202, 1)",
            停飞: "rgba(91, 109, 128, 0.04)",
        };
        if (data.length > 0) {
            this_.startTime = dayjs(data[0].stateStartTime).valueOf()
        }

        this_.dataE = data.map(item => {
            const obj = item.lengedList&&item.lengedList.reduce((acc, {
                connotation,
                displayValue
            }) => {
                acc[connotation] = displayValue;
                acc['网络故障/分站故障']='#eee'
                return acc;
            }, {});
            return {
                name: item.name,
                lengedList: obj,
                value: [item.pointId, dayjs(item.stateStartTime).valueOf(), dayjs(item.stateEndTime)
                    .valueOf()
                ]
            }
        })
        for (var i = 0; i < this_.dataE.length; i++) {
            this_.dataE[i].itemStyle = {
                normal: {
                    color: this_.dataE[i].lengedList[this_.dataE[i].name]
                },
            };
        }

        let renderItem = function (params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.3;
            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height,
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height,
            });
            return (
                rectShape && {
                    type: "rect",
                    transition: ["shape"],
                    shape: rectShape,
                    style: api.style(),
                }
            );
        };
        let option = {
            tooltip: {
                formatter: function (params) {
                    return params.marker + params.name + ": " + dayjs(params.value[1]).format(
                        'YYYY-MM-DD HH:mm:ss');
                },
            },
            title: {
                text: props.attrObj && props.attrObj.chartTitle,
                left: "center",
                top: 10,
            },

            grid: {
                top: 60,
                left: 60,
                right: 30,
                bottom: 30
            },
            dataZoom: [{
                    type: "inside",
                    filterMode: "weakFilter",
                    showDataShadow: false,
                    top: 400,
                    height: 10,
                    borderColor: "transparent",
                    backgroundColor: "#e2e2e2",
                    handleIcon: "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
                    handleSize: 20,
                    start: 0,
                    end: 60,
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: "#aaa",
                    },
                    labelFormatter: "",
                },
                {
                    type: "inside",
                    filterMode: "weakFilter",
                },
            ],
            xAxis: [{
                // min: this_.startTime,
                name: props.attrObj && props.attrObj.chartX,
                type: 'time',
                scale: true,
                axisLabel: {
                    formatter: function (val) {
                        return dayjs(val).format('MM-DD HH:mm');
                    },
                    color: 'rgba(62, 70, 79, 1)'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(91, 109, 128, 0.8)'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(91, 109, 128, 0.16)',
                        type: 'dashed'
                    }
                },
                // data:xdata
            }, ],
            yAxis: [{
                    name: props.attrObj && props.attrObj.chartY,
                    data: categories,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.8)'
                        }
                    },
                    axisLabel: {
                        formatter: function (params) {
                            return params;
                        },
                        textStyle: {
                            color: "#000",
                            fontWeight: "600",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.16)',
                            type: 'dashed'
                        }
                    }
                },
                {
                    type: "value",
                    // interval: 30,
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.16)',
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.8)'
                        }
                    },
                    axisLabel: {
                        formatter: function (params) {
                            return params;
                        },
                        textStyle: {
                            color: "#000",
                            fontWeight: "600",
                        },
                    },
                },
            ],
            series: [{
                type: "custom",
                renderItem: renderItem,
                stack: "总量",
                itemStyle: {
                    normal: {},
                },
                encode: {
                    x: [1, 2],
                    y: 0,
                },
                data: this_.dataE,
            }],
        };
        comChart.setOption(option, true)
    }
    watchEffect(() => {
        if (JSON.stringify(props.chartList) != "{}") {
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1(props.chartList)
            })
        } else {
            nextTick(() => {
                // comChart = echarts.init(document.getElementById("comChart"));
                // setC1({})
            })
        }
    })
    onMounted(() => {
        window.addEventListener('resize', () => {
            if(comChart){
                comChart.resize()
            }
        })
    })
</script>